import React from 'react';
import { Table, Button, Select, Space, message } from 'antd';
import './RecyceGoods.css';
import axios from '../../../utils/http';
const { Column } = Table;
const { Option } = Select;
class RecyceGoods extends React.Component {
  state = {
    recyceList: [],
    reducteList: [],
    op: '1' /* 批量操作类型 */,
  };
  componentDidMount = () => {
    this.getAllGoods();
  };
  /* 获取所有商品 */
  getAllGoods = () => {
    axios({
      url: '/mm-goods/goods/queryGoodsUn',
      method: 'get',
    }).then(({ data }) => {
      console.log(data);
      this.setState({
        recyceList: data.data,
      });
    });
  };
  /* 单一商品还原回收站 */
  reducte = id => {
    axios({
      url: '/mm-goods/goods/hyGoodsUn',
      method: 'post',
      data: {
        goodsIds: [id],
      },
    }).then(({ data }) => {
      if (data.code === 200) {
        message.success('还原成功');
        this.getAllGoods();
      }
    });
  };

  comfirmOp = () => {
    console.log(this.state.reducteList);
    this.state.op === '1' ? this.batchreducte() : this.batchDle(this.state.reducteList);
  };
  /* 批量商品还原回收站 */
  batchreducte = () => {
    axios({
      url: '/mm-goods/goods/hyGoodsUn',
      method: 'post',
      data: {
        goodsIds: this.state.reducteList,
      },
    }).then(({ data }) => {
      if (data.code === 200) {
        message.success('批量还原成功！');
        this.getAllGoods();
      }
    });
  };
  /* 商品删除 (单个/多个)*/
  batchDle = id => {
    let ids = typeof id === 'number' ? [id] : [...id];
    axios({
      url: '/mm-goods/goods/delGoodsUn',
      method: 'post',
      data: {
        goodsIds: ids,
      },
    }).then(({ data }) => {
      let msg = ids.length > 1 ? '批量删除成功!' : '删除成功!';
      if (data.code === 200) {
        message.success(msg);
        this.getAllGoods();
      }
    });
  };
  changeOp = val => {
    this.setState({
      op: val,
    });
  };
  render() {
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          reducteList: selectedRowKeys,
        });
      },

      onSelectAll: (selected, selectedRows, changeRows) => {
        let idArr = selectedRows.map(item => {
          return item.goods_id;
        });
        this.setState({
          reducteList: idArr,
          reducteList: idArr,
        });
      },
    };
    return (
      <div className="recyceGoods">
        <Table
          rowSelection={rowSelection}
          dataSource={this.state.recyceList}
          pagination={{
            defaultPageSize: 5,
            total: this.state.recyceList.length,
            pageSizeOptions: [5, 10, 15],
            showTotal: total => `总共 ${total} 条数据`,
          }}
          rowKey="goods_id"
        >
          <Column align="center" title="商品编号" dataIndex="goods_id" key="goods_id"></Column>

          <Column
            align="left"
            title="商品名称"
            key="goods_pp"
            render={({ goods_name, goods_pp }) => {
              return (
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                  }}
                  key={goods_pp}
                >
                  <img
                    style={{ width: '80px', height: '80px' }}
                    src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=282156732,749984537&fm=26&gp=0.jpg"
                    alt={goods_name}
                  />
                  <p style={{ paddingLeft: '30px' }}>{goods_name}</p>
                </div>
              );
            }}
          ></Column>

          <Column align="center" title="货号" dataIndex="goods_id" key="goods_id"></Column>
          <Column align="center" title="价格" dataIndex="goods_price" key="goods_price"></Column>
          <Column
            align="center"
            title="操作"
            render={({ goods_id }) => {
              return (
                <>
                  <Button type="link" onClick={() => this.reducte(goods_id)}>
                    还原
                  </Button>
                  <Button type="link" onClick={() => this.batchDle(goods_id)}>
                    删除
                  </Button>
                </>
              );
            }}
          ></Column>
        </Table>
        <div className="addrecy-btn">
          <Space>
            <Select defaultValue="1" onChange={e => this.changeOp(e)}>
              <Option value="1">还原</Option>
              <Option value="0">删除</Option>
            </Select>
            <Button onClick={this.comfirmOp}>确定</Button>
          </Space>
        </div>
      </div>
    );
  }
}
export default RecyceGoods;
